import Maincontainer from "@/components/maincontainer";
import { defineComponent, ref, } from "vue";
import { NGrid, NGi, NH1, NText, NDescriptions, NDescriptionsItem, NSwitch, NRadio, NRadioGroup, NRadioButton, NButton,NAvatar, } from "naive-ui"
export default defineComponent({
    name: "usernameset",
    setup() {
        const formValue = ref({
            showfile: false,
        })
        return () => (<Maincontainer>
            <NGrid x-gap={5} y-gap={5}>
                <NGi span={24} class="p-4">
                    <NDescriptions label-placement={"left"} column={1} v-slots={{
                        header: () => <NH1 prefix={"bar"} class="text-base">
                            <NText type="primary">
                                个人账号
                            </NText>
                        </NH1>
                    }}>
                        <NDescriptionsItem v-slots={{ label: () => <span class="w-120px  inline-block text-right">头像</span> }} content-style={{ "display": "inline-flex", "align-content": "center" }}>
                            <div class="w-200px !justify-start">
                            <NAvatar
                                round={true}
                                size={48}
                                src={"https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"}
                            />
                            </div>
                            <NButton text type={"info"} class="mx-2">更换头像</NButton>
                        </NDescriptionsItem>
                        <NDescriptionsItem v-slots={{ label: () => <span class="w-120px  inline-block text-right">昵称</span> }} content-style={{ "display": "inline-flex", "align-content": "center" }}>
                            <span class="w-200px">用户昵称111</span>
                            <NButton text type={"info"} class="mx-2">更换昵称</NButton>
                        </NDescriptionsItem>
                        <NDescriptionsItem v-slots={{ label: () => <span class="w-120px  inline-block text-right">邮箱</span> }} content-style={{ "display": "inline-flex", "align-content": "center" }}>
                            <span class="w-200px">******</span>
                            <NButton text type={"info"} class="mx-2">更换邮箱地址</NButton>
                        </NDescriptionsItem>
                        <NDescriptionsItem v-slots={{ label: () => <span class="w-120px  inline-block text-right">手机</span> }} content-style={{ "display": "inline-flex", "align-content": "center" }}>
                            <span class="w-200px">******</span>
                            <NButton text type={"info"} class="mx-2">更换手机号码</NButton>
                        </NDescriptionsItem>
                        <NDescriptionsItem v-slots={{ label: () => <span class="w-120px  inline-block text-right">密码</span> }} content-style={{ "display": "inline-flex", "align-content": "center" }}>
                            <span class="w-200px">******</span>
                            <NButton text type={"info"} class="mx-2">修改密码</NButton>
                        </NDescriptionsItem>
                    </NDescriptions>
                </NGi>
            </NGrid>
        </Maincontainer>)
    },
})